<template>
	<view style="padding-bottom: 180rpx;">
		<view class="tips">在线”达人，“隐身”达人都可抢单哦!</view>
		<view class="top">
			<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false">
				<view class="top-list">
					<view class="top-item" v-for="(item, index) in serviceList" :key="index" @click="selectItem(item)">
						<image class="img1" v-if="item.selected" src="https://pw.qyang.cc/static/commit-success.png"
							mode=""></image>
						<image class="img" :src="rq.imgUrl(item.image)" mode="aspectFill"></image><br />
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="content">
			<view class="con1" @tap="getAddress">
				<i class="iconfont">&#xe601;</i> <span class="text1">地点</span> <span
					class="text2">{{addressInfo.address}}</span>
				<view class="right-btn">
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>

			<view class="con1" @click="chooseTime()">
				<i class="iconfont">&#xe65f</i> <span class="text1">时间</span> <span class="text2">
					{{formatDate(selectedTime)}}
				</span>
				<view class="right-btn">
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>
			<view class="con1" @click="chooseGrade()">
				<i class="iconfont">&#xe6ac;</i> <span class="text1">等级</span> <span
					class="text2">{{selectedGrade[0].title}}</span>
				<view class="right-btn">
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>
			<view class="con1" @tap="getCity">
				<i class="iconfont">&#xe62c;</i> <span class="text1">城市</span> <span
					class="text2">{{addressInfo.city_name}}</span>
				<view class="right-btn">
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>
			<view class="con1" @click="chooseRemark()">
				<i class="iconfont">&#xe648;</i> <span class="text1">备注</span> <span
					class="text2">{{remarkContent?remarkContent:'暂无备注'}}</span>
				<view class="right-btn">
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>

			<u-datetime-picker :show="showTime" v-model="valueTime" mode="datetime" @confirm="confirmTime"
				@cancel="showTime=false" :formatter="formatter"></u-datetime-picker>

			<u-picker :show="showGrade" :columns="[levelList]" keyName='title' @confirm="confirmGrade"
				@cancel="showGrade=false"></u-picker>
			<u-popup :show="showRemark" mode="center" @close="showRemark=false" @open="openRemark" :closeable="true"
				round="10">
				<view class="pop-bg">
					备注：
					<view class="text">
						<u--textarea v-model="remarkContent" placeholder="请输入..." count maxlength="60"
							height="100"></u--textarea>
					</view>

					<view class="btn">
						<view class="cancel" @click="showRemark=false">取消</view>
						<view class="confirm" @click="confirmRemark">确认</view>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="content-item" v-if="selectedServiceList.length>0"
			v-for="(selectedItem, selectedIndex) in selectedServiceList" :key="selectedIndex">
			<view class="item1">
				<view class="name">
					{{selectedItem.name}}
				</view>
				<view class="money" v-if="selectedItem.times*selectedItem.price>0">
					￥{{selectedItem.times*selectedItem.price}}
				</view>
			</view>
			<view class="item2">
				<view class="text1">
					最低{{selectedItem.price}}元/小时
				</view>
				<view class="text2">
					<u-number-box v-model="selectedItem.times" min=0
						:disableMinus="selectedItem.times==selectedItem.starting">
						<view slot="minus" class="minus"
							:class="selectedItem.times==selectedItem.starting?'disabled':''">
							<u-icon name="minus" :color="selectedItem.times==selectedItem.starting?'#f6f6f6':'#FF7681'"
								size="12"></u-icon>
						</view>
						<text slot="input" class="input">{{selectedItem.times}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#ffffff" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="item3">
				<view class="btn" @click="removeSelectedService(selectedItem)">
					删除
				</view>
			</view>
		</view>

		<view class="content1">
			<view class="quan" @click="chooseQuan()" v-if="!selectedQuanItem">
				<view class="name">
					优惠券
				</view>
				<view class="right">
					<view class="money">
						未使用优惠券
					</view>
					<view class="right-btn">
						<u-icon name="arrow-right" size="14" color="#FF7681"></u-icon>
					</view>
				</view>
			</view>
			<view class="quan" @click="chooseQuan()" v-else>
				<view class="name">
					{{selectedQuanItem.name}}
				</view>
				<view class="right">
					<view class="money">
						-{{selectedQuanItem.type=='FULL'?selectedQuanItem.money:Number(selectedQuanItem.discount)}}{{selectedQuanItem.type=='FULL' ? '元' : '%'}}
					</view>
					<view class="right-btn">
						<u-icon name="arrow-right" size="14" color="#FF7681"></u-icon>
					</view>
				</view>
			</view>
			<u-popup :show="showQuan" mode="bottom" @close="showQuan=false" @open="openQuan" :closeable="true"
				round="10">
				<view class="pop-bg">
					<view class="title">
						优惠券
					</view>
					<view class="bg" v-if="quanList.length>0">
						<view class="bg-quan" v-for="(item,index) in quanList" @click="selectQuanItem(item,index)">
							<view class="price">
								{{ item.type=="FULL"?Number(item.money):Number(item.discount) }}<span
									style="font-size: 40rpx;">{{item.type=="FULL"?'元':'%'}}</span><br>
								<span class="text1">满{{ item.min_money }}可抵用</span>
							</view>
							<view class="text">
								<view>{{item.name}}</view> <span
									class="text2">{{item.start_time}}-{{item.expire_time}}</span>
							</view>
							<image class="btn-img1" v-if="item.selected"
								src="https://pw.qyang.cc/static/commit-success.png" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode="">
							</image>
						</view>
					</view>
					<view class="bg bg-null" v-else>
						<image class="null-img" src="https://pw.qyang.cc/static/yhq.png" mode="aspectFill"></image>
						<view class="null-text">
							您暂时没有优惠券
						</view>
					</view>
					<view class="btn">
						<view class="confirm" @click="confirmQuan">确认</view>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="bottom">
			<view class="text" @click="reset()">重置</view>
			<view class="btn" @click="toPay()">去支付{{realMoney}}</view>
		</view>
	</view>
</template>

<script>
	import {plus,minus,times,divide} from '@/utils/util.js'
	export default {
		data() {
			return {
				showQuan: false,
				showTime: false,
				showGrade: false,
				showRemark: false,
				valueTime: Number(new Date()),
				selectedTime: Number(new Date()),
				selectedGrade: [{
					id: 0,
					title: '不指定达人等级'
				}],
				selectedQuanItem: null,
				quanItem: null,
				remarkContent: '',
				columnsGrade: [],
				quanList: [],
				serviceList: [],
				selectedServiceList: [],
				numValue: 1,
				myAddress: {},
				addressInfo: {},
				levelList: [],
				city_id: 0,
				quanTotal: 0,
				dw: {},
				pay_json: [],
				isChooseCoupon: false
			};
		},
		watch: {
			city_id: {
				handler(n, o) {
					console.log(n, 'city_id')
					if (n) {
						this.getSeviveList()
					}
				}
			},
			selectedServiceList: {
				handler(n, o) {
					if (n.length == 0) {
						this.selectedQuanItem = this.quanItem = null
					} else {
						if (!this.isChooseCoupe) {
							this.quanList.map(item=>{
								item.selected = false
							})
							for (let i = 0; i < this.quanList.length; i++) {
								if (this.money * 1 >= this.quanList[i].min_money * 1) {
									this.selectedQuanItem = this.quanItem = this.quanList[i]
									return
								}
							}
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {
			// this.dw = uni.getStorageSync('dw')
			// this.city_id = this.dw.id
			// this.addressInfo.lat = this.dw.lat
			// this.addressInfo.lng = this.dw.lng
			// this.getCurrentAddress()
			this.getData()
		},
		computed: {
			money() {
				let totalPrice = 0
				this.selectedServiceList.map(item => {
					totalPrice = plus(times(item.price,item.times),totalPrice)
				})
				return totalPrice ? totalPrice : 0
			},
			realMoney() {
				let money = null
				if (this.selectedQuanItem) {
					this.quanItem.selected = true
					if (this.selectedQuanItem.type == 'FULL') {
						money = minus(this.money,this.selectedQuanItem.money)
					} else {
						money = minus(this.money,divide(times(this.money,this.selectedQuanItem.discount),100))
					}
				} else {
					money = this.money
				}
				if (money < 0) {
					this.selectedQuanItem = this.quanItem = null
					money = 0
				}
				return money ? money : ''
			},
		},
		onShow() {
			this.dw = uni.getStorageSync('dw')
			this.city_id = this.dw.id
			this.addressInfo.city_name = this.dw.shortname
			uni.$on('address', (data) => {
				this.addressInfo = data;
				this.city_id = data.city_id
				// this.address_id = data.id
				// this.getDefaultAddress()
				// this.getAllMoney()
			})
		},
		methods: {
			async getData() {
				// await this.getMyAddress(false)
				await this.getAddressInfo();
				// this.getSeviveList()
				this.getLevel();
				this.getCoupon()
			},
			getCurrentAddress() {
				let _this = this
				this.rq.getData('daren/getAddress', {
					lng: this.dw.lng,
					lat: this.dw.lat
				}).then(res => {
					if (res.code == 1) {
						// _this.addressInfo.address = res.data.address
						_this.$set(_this.addressInfo, 'address', res.data.address)
					}
				})
			},
			getSeviveList() {
				this.rq.getData("service/list", {
					city_id: this.city_id,
					is_open: 1
				}).then(res => {
					var serviceList = [];
					for (var item of res.data) {
						item.times = item.starting
						serviceList.push(item)
					}

					this.serviceList = serviceList
				})
			},
			getAddressInfo() {
				this.rq.getData("address/default").then(res => {
					console.log(res.data)
					this.addressInfo = res.data
					this.addressInfo.city_name = data.city_name
					this.city_id = data.city_id
				})
			},
			getLevel() {
				this.rq.getData("common/level").then(res => {
					this.levelList = res.data
					this.levelList.unshift({
						id: 0,
						title: '不指定达人等级'
					})
				})
			},
			getCoupon(more) {
				this.rq.getData('Market/getMyCoupons', {
					status: 0
				}).then(res => {
					if (more) {
						this.quanList = [...this.quanList, ...res.data.data]
					} else {
						this.quanList = res.data.data
					}
					this.quanTotal = res.data.total
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},

			getMyAddress(q) {
				this.reloadText = "更新中~";
				if (!q && uni.getStorageSync('dw')) {
					this.myAddress = uni.getStorageSync('dw')
					this.lng = this.myAddress.lng
					this.lat = this.myAddress.lat
					this.city_id = this.myAddress.id;
					this.reloadText = "更新定位"
				} else {
					var that = this
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true,
						success: r => {
							uni.setStorageSync("dingwei", {
								lat: r.latitude,
								lng: r.longitude
							})
							that.rq.getData('area/getLocation', {
								longitude: r.longitude,
								latitude: r.latitude
							}).then(res => {
								if (res.code == 1) {
									var dw = {
										id: res.data.id,
										shortname: res.data.name,
										lat: r.latitude,
										lng: r.longitude
									}
									that.myAddress = dw
									that.city_id = res.data.id;
									that.lng = dw.lng
									that.lat = dw.lat
									uni.setStorageSync('dw', dw)
								}
								this.reloadText = "更新定位"
							})
						},
						fail: (err) => {
							console.log(err)
							this.reloadText = "更新定位"
						},
						complete: () => {}
					});
				}
			},
			chooseQuan() {
				if (this.selectedServiceList.length == 0||this.money==0) {
					this.selectedQuanItem = this.quanItem = null
					this.quanList.map(item => {
						item.selected = false
					})
				}
				this.showQuan = true
			},
			chooseTime() {
				this.showTime = true
			},
			chooseGrade() {
				this.showGrade = true
			},
			chooseRemark() {
				this.showRemark = true
			},
			openRemark() {
				this.showRemark = true
			},
			openQuan() {
				this.showQuan = true
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			},
			confirmTime(e) {
				this.showTime = false
				this.selectedTime = e.value
			},
			confirmGrade(e) {
				this.showGrade = false
				this.selectedGrade = e.value
			},
			confirmRemark() {
				this.showRemark = false
			},
			confirmQuan() {
				this.showQuan = false
				this.selectedQuanItem = this.quanItem
			},
			selectItem(item) {
				const index = this.selectedServiceList.findIndex(selected => selected.name === item.name);
				if (index > -1) {
					// 如果已存在，从selectedServiceList数组中移除该项
					this.selectedServiceList.splice(index, 1);
					item.selected = false;
				} else {
					// 如果不存在，添加到selectedServiceList数组，并设置为选中状态
					this.selectedServiceList.push(item);
					item.selected = true;
				}
				console.log(this.serviceList);
				console.log(item);
			},
			removeSelectedService(selectedItem) {
				// 从selectedServiceList数组中移除当前点击要删除的服务项
				const index = this.selectedServiceList.indexOf(selectedItem);
				if (index > -1) {
					this.selectedServiceList.splice(index, 1);
				}
				// 在serviceList中找到对应的服务项，并将其选中状态重置为false
				const correspondingItem = this.serviceList.find(service => service.name === selectedItem.name);
				if (correspondingItem) {
					correspondingItem.selected = false;
				}
			},
			selectQuanItem(item,index) {
				if(this.selectedServiceList.length == 0||this.money==0){
					uni.showToast({
						title:'请选择服务项目~',
						icon:'none'
					})
					return
				}else{
					this.isChooseCoupe = true
				}
				
				this.quanList.map((quan,i) => {
					if(index==i){
						if(quan.selected){
							quan.selected = false
							this.selectedQuanItem = this.quanItem = null
						}else{
							quan.selected = true;
							this.selectedQuanItem = this.quanItem = quan
						}
					}else{
						quan.selected = false
					}
				});
			},
			toPay() {
				var that = this
				/* ifdef H5*/
				var platform = 'h5'
				/* endif*/
				/* ifdef MP-WEIXIN*/
				var platform = 'wechat'
				/* endif*/
				/* ifdef APP-PLUS*/
				var platform = 'app'
				/* endif*/
				if (!this.addressInfo) {
					uni.showToast({
						title: '请选择服务地址',
						icon: 'none',
						duration: 2000
					});
					return;

				}
				var pay_json = [];
				var money = 0;
				for (var item of this.selectedServiceList) {
					pay_json.push({
						id: item.id,
						times: item.times,
						price: item.price
					})
					money += item.price * item.times
				}
				if (pay_json.length == 0) {
					uni.showToast({
						title: '请选择服务项目',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				var data = {
					// daren_id: this.id,
					pay_type: "",
					start_time: this.selectedTime,
					level: this.selectedGrade[0].id,
					notes: this.remarkContent,
					play_json: pay_json,
					lng: this.addressInfo.lng,
					lat: this.addressInfo.lat,
					address_id: this.addressInfo.id,
					city_id: this.city_id,
					address: this.addressInfo.address,
					province: this.addressInfo.province_name,
					district: this.addressInfo.district_name,
					city: this.addressInfo.city_name,
					phone: this.addressInfo.mobile,
					person: this.addressInfo.consignee,
					platform: platform,
					coupon_id: this.quanItem ? this.quanItem.id : 0
				};
				if (uni.getStorageSync('openid')) {
					data.openid = uni.getStorageSync('openid');
				}

				this.rq.getData('order/prepay', data).then(res => {

					that.getCoupon(false)
					uni.navigateTo({
						url: '/subpages/pay/pay?money=' + this.realMoney + '&type=order&id=' + res.data
							.order.id,
						success() {
							that.reset()
						}
					})
				})

			},
			reset() {
				this.serviceList.map(item => {
					item.selected = false
				})
				this.quanItem = null
				this.selectedQuanItem = null
				this.selectedServiceList = []
			},
			getCity() {
				uni.navigateTo({
					url: '/subpages/location/location'
				})
			},
			getAddress() {
				uni.navigateTo({
					url: '/subpages/set/address'
				})
				// uni.chooseLocation({
				// 	success: (res) => {
				// 		this.addressInfo.lat = res.latitude
				// 		this.addressInfo.lng = res.longitude
				// 		this.addressInfo.address = res.name
				// 	},
				// 	fail: (res) => {
				// 		console.log(res)
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	.content-item {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin: 20rpx auto;
		width: 93.6%;
		overflow: hidden;
		border-radius: 8px;
		padding: 20rpx 0;

		.item1 {
			display: flex;
			padding: 20rpx 40rpx;
			justify-content: space-between;

			.name {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 16px;
				font-weight: normal;
				line-height: 16px;
				letter-spacing: 0px;

				color: #333333;
			}

			.money {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 14px;
				text-align: right;
				letter-spacing: 0px;

				color: #FF7681;
			}
		}

		.item2 {
			display: flex;
			padding: 20rpx 40rpx;
			justify-content: space-between;

			.text1 {
				/* 最低299元/小时 */
				font-family: 阿里巴巴普惠体 2.0;
				font-weight: 500;
				font-size: 13px;
				color: #FF5866
			}

			.text2 {
				font-family: 阿里巴巴普惠体 2.0;
				font-weight: 500;
				font-size: 12px;
				color: #313232;

				.input {
					font-family: PingFang SC;
					font-size: 18px;
					font-weight: normal;
					line-height: 18px;
					letter-spacing: 0px;
					font-variation-settings: "opsz" auto;
					color: #000000;
					width: 80rpx;
					text-align: center;
				}

				.minus {
					width: 19px;
					height: 19px;
					opacity: 1;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1px solid #FF7681;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&.disabled {
						border: 1px solid #f6f6f6;
					}
				}

				.plus {
					width: 19px;
					height: 19px;
					opacity: 1;
					background: #FF7681;
					box-sizing: border-box;
					border: 1px solid #FF7681;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.item3 {
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 90%;
				height: 30px;
				border-radius: 102px;
				opacity: 1;

				background: #F6F6F6;

				border: 1px solid #F6F6F6;
				font-family: PingFang SC;
				font-size: 15px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;

				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.content1 {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin: 20rpx auto;
		width: 93.6%;
		overflow: hidden;
		border-radius: 8px;
		padding: 20rpx 0;
		align-items: center;
		justify-content: center;

		.pop-bg {
			// width: 260px;
			height: 320px;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #333333;
			padding: 40rpx;
			padding-bottom: 80rpx;
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 16px;
				font-weight: 500;
				line-height: 16px;
				letter-spacing: 0px;

				color: #212121;
			}

			.bg {
				height: 270px;
				margin: 40rpx 0;
				overflow-y: scroll;

				.img {
					width: 335px;
					height: 97px;
					margin-bottom: 20rpx;
				}

				.bg-quan {
					display: flex;
					align-items: center;
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 72px;
					font-weight: 800;
					letter-spacing: 0px;
					color: #FF204A;
					z-index: auto;
					position: relative;
					height: 194rpx;
					// width: 335px;
					margin: 20rpx auto;
					background: url('https://pw.qyang.cc/static/quan-bg.png') center no-repeat;
					background-size: 100%;

					.text {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 22rpx;
						font-weight: 600;
						line-height: 22rpx;
						color: #212121;
						text-align: center;
						width: 400rpx;
					}

					.text2 {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 24rpx;
						font-weight: normal;
						line-height: 24rpx;
						margin-top: 32rpx;
						display: block;
						letter-spacing: 0px;
						color: #666666;
					}

					.price {
						font-family: 阿里巴巴普惠体 2.0;
						font-weight: 500;
						font-size: 72rpx;
						width: 184rpx;
						text-align: center;
						white-space: nowrap;
					}

					.text1 {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 11px;
						font-weight: normal;
						line-height: 11px;
						letter-spacing: 0px;
						color: #FF5866;
					}

					.btn-img1 {
						width: 20px;
						height: 20px;
						position: absolute;
						right: 24px;
					}
				}
			}

			.bg-null {
				display: flex;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				margin-top: 20rpx;

				.null-img {
					margin-top: 20rpx;
					width: 268rpx;
					height: 268rpx;
				}

				.null-text {
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0px;
					margin-top: 20rpx;
					color: #D1D1D6;
				}
			}

			.btn {
				position: absolute;
				bottom: 0;
				left: 40rpx;
				right: 40rpx;
				margin: 10rpx auto;

				.confirm {
					// width: 335px;
					height: 37px;
					border-radius: 102px;
					opacity: 1;
					background: #FF5866;
					border: 1px solid #FF5866;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx 0;
				}
			}
		}

		.quan {
			width: 680rpx;
			height: 39px;
			border-radius: 16rpx;
			opacity: 1;

			background: #FFF3F6;

			box-sizing: border-box;
			border: 1px solid #FFB8BE;

			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;

			color: #FF7681;
			display: flex;
			align-items: center;

			.name {
				padding: 10rpx 20rpx;
			}

			.right {
				position: absolute;
				right: 0;
				display: flex;
				align-items: center;

				.money {
					margin: 20rpx;
				}

				.right-btn {

					margin-right: 80rpx;
				}
			}

		}
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin: 20rpx auto;
		width: 93.6%;
		overflow: hidden;
		border-radius: 8px;
		padding: 20rpx 0;

		.pop-bg {
			width: 260px;
			// height: 220px;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #333333;
			padding: 40rpx;

			.text {
				margin: 40rpx 0;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;

				.cancel {
					width: 98px;
					height: 34px;
					border-radius: 102px;
					opacity: 1;

					background: #F7F7F7;

					border: 1px solid #F7F7F7;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 40rpx;
				}

				.confirm {
					width: 98px;
					height: 34px;
					border-radius: 102px;
					opacity: 1;

					background: #FF5866;

					border: 1px solid #FF5866;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.con1 {
			display: flex;
			align-items: center;

			font-family: 阿里巴巴普惠体 2.0;
			font-size: 14px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			padding: 20rpx;

			.text1 {
				color: #FF7883;
				margin: 0 20rpx;
			}

			.text2 {
				width: 480rpx;
				color: #333333;
				overflow: hidden;
				/* 超出元素宽度的内容隐藏起来 */
				text-overflow: ellipsis;
				/* 当文本溢出时显示省略号 */
				white-space: nowrap;
			}

			.right-btn {
				position: absolute;
				right: 0;
				margin-right: 50rpx;
			}
		}
	}

	.top {
		display: flex;
		// background-color: #ffffff;
		margin: 20rpx auto;
		height: 92px;
		width: 93.6%;
		overflow: hidden;
		border-radius: 8px;

		.scroll-view {
			white-space: nowrap;
			/* 让内部元素不换行，实现横向排列 */
			width: 100%;
		}

		.top-list {
			display: inline-block;
			/* 让列表项可以横向排列 */
		}

		.top-item {

			font-family: 阿里巴巴普惠体 2.0;
			font-size: 16px;
			font-weight: normal;
			letter-spacing: 0px;
			color: #333333;
			text-align: center;
			display: inline-block;
			padding: 0 30rpx;
			margin-top: 20rpx;

			/* 设置鼠标悬停时为指针样式，表示可点击 */
			.img {
				width: 101rpx;
				height: 101rpx;
				border-radius: 8rpx;
			}

			.img1 {
				width: 15px;
				height: 15px;
				position: absolute;
				margin-left: 32px;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		display: flex;
		align-items: center;

		.text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 45px;
			letter-spacing: 0px;
			color: #333333;
			margin: 0 40rpx;
			width: 10%;
			height: 88rpx;
			text-align: center;
		}

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 20rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			width: 70%;
		}
	}

	.tips {
		line-height: 76rpx;
		padding: 0 31rpx;
		background: #FEF4F5;
		font-size: 26rpx;
		color: #FF7681;
	}
</style>